<template>
  <div class="nav-container" :class="{ visable: isHideHead }">
    <!-- 搜索页的导航栏 -->
    <template v-if="myType === 'search'">
      <div class="nav-list">
        <ul>
          <li
            class="nav-item"
            v-for="(item, i) in searchNav"
            :class="{ checked: searchChecked === item.name }"
            :key="i + 'search'"
            @click="nav(item)"
          >
            <span>{{ item.name }}</span>
          </li>
        </ul>
      </div>
    </template>
    <!-- 主页的导航栏 -->
    <template v-if="myType === 'home'">
      <div class="nav-list">
        <!-- 顶部导航栏 -->
        <ul>
          <!-- index 为 -2 时 -->
          <li
            class="nav-item"
            :class="{ checked: navHomeChecked.father === -2 }"
            @click="goCateOther(-2)"
          >
            <span>综合</span>
          </li>
          <!-- index 为 -1 时 -->
          <li
            class="nav-item"
            :class="{ checked: navHomeChecked.father === -1 }"
            @click="goCateOther(-1)"
          >
            <span>关注</span>
          </li>
          <!-- 导航列表 -->
          <li
            class="nav-item"
            v-for="(item, i) in cateList"
            :class="{ checked: navHomeChecked.father === i }"
            :key="i"
            @mouseleave="mouseleave"
            @mousemove="mousemove(i)"
          >
            <span @click="goCate(item, i)"> {{ item.category_name }} </span>
            <!-- 前面两个没有导航卡! -->
            <!-- 对应导航栏的子栏才有激活状态 -->
            <!-- 导航卡 -->
            <template>
              <div class="nav-card" v-show="showCateIndex === i">
                <div
                  class="nav-card-item"
                  :key="j + 'child'"
                  v-for="(item2, j) in cateChild[i]"
                  @click="goCateChild(item2, i, j)"
                  :class="{
                    childChecked:
                      navHomeChecked.child === j && navHomeChecked.father === i
                  }"
                >
                  {{ item2.tag_name }}
                </div>
              </div>
            </template>
          </li>
        </ul>
        <span class="cate-manage">标签管理</span>
      </div>
    </template>
  </div>
</template>

<script>
import { reqCate, reqCateChild } from '@/api/home'
import { mapState, mapMutations } from 'vuex'

export default {
  data() {
    return {
      // 搜索页的导航栏配置
      searchNav: [
        { name: '综合', id: '0' },
        { name: '用户', id: '1' },
        { name: '文章', id: '2' },
        { name: '标签', id: '9' }
      ],
      // 搜索页选中的导航栏
      searchChecked: '综合',
      // 定时器标识，做导航的防抖处理
      timer: null,
      showCateIndex: false
    }
  },
  created() {
    if (this.myType === 'home') {
      console.log('获取分类数据')
      this.getCateList()
    } else {
      this.searchChecked =
        window.sessionStorage.getItem('nav-search-checked') || '综合'
    }
  },
  props: {
    myType: {
      type: String,
      default: 'search'
    }
  },
  computed: {
    ...mapState(['isHideHead', 'navHomeChecked', 'cateList', 'cateChild'])
  },
  methods: {
    ...mapMutations([
      'updateNavHomeChecked',
      'updateCateList',
      'updateCateChild'
    ]),
    // 获取分类数据
    async getCateList() {
      //  分类父栏
      const { data: res } = await reqCate()
      this.updateCateList([...res.data])

      // 分类子栏
      let childArr = []
      res.data.forEach(async (item) => {
        const { data: child } = await reqCateChild(item.category_id)
        childArr.push(child.data)
      })
      this.updateCateChild(childArr)
    },
    // 搜索页的导航
    nav(item) {
      this.searchChecked = item.name
      window.sessionStorage.setItem('nav-search-checked', item.name)
      this.$bus.$emit('searchCateChange', item.id)
    },
    // 分类页的导航
    goCate(item, index) {
      this.updateNavHomeChecked({
        father: index,
        child: -1
      })
      // 对象形式存储
      window.sessionStorage.setItem(
        'nav-home-checked',
        JSON.stringify(this.navHomeChecked)
      )

      console.log(index)
      // 发送 对应的子分类列表 与 点击分类id
      this.$bus.$emit('homeCateChange', item.category_id)
    },
    // 分类子页的导航
    goCateChild(item, fatherIndex, index) {
      this.updateNavHomeChecked({
        father: fatherIndex,
        child: index
      })
      // 对象形式存储
      window.sessionStorage.setItem(
        'nav-home-checked',
        JSON.stringify(this.navHomeChecked)
      )
      // console.log('子栏的数据', item.tag_id, fatherIndex, index)
      this.$bus.$emit('homeCateChange', item.tag_id)
    },
    goCateOther(index) {
      this.updateNavHomeChecked({
        father: index,
        child: this.navHomeChecked.child
      })
      // 对象形式存储
      window.sessionStorage.setItem(
        'nav-home-checked',
        JSON.stringify(this.navHomeChecked)
      )
      this.$bus.$emit('homeCateChange', this.cateList[0].category_id)
      // console.log(this.cateList[0])
    },
    mouseleave() {
      // 清除防抖的计时器，防止一直显示
      clearTimeout(this.timer)
      this.showCateIndex = false
    },
    mousemove(i) {
      // 防抖处理
      if (this.timer) clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.showCateIndex = i
      }, 300)
    }
  }
}
</script>

<style lang="less" scoped>
.nav-container {
  width: 100%;
  position: fixed;
  top: 5rem;
  left: 0;
  height: 3.833rem;
  background-color: #fff;
  z-index: 10;
  transform: translateZ(0);
  transition: 0.2s all;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);

  .nav-list {
    height: 100%;
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    position: relative;

    ul {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: auto;

      .nav-item {
        font-size: 1.16rem;
        display: flex;
        align-items: center;
        color: #71777c;

        height: 100%;
        white-space: nowrap;
        padding: 0;
        cursor: pointer;
        .nav-card {
          position: absolute;
          background-color: #fff;
          box-shadow: 0 0 3px rgb(126, 127, 127);
          max-width: 300px;
          border-radius: 2px;
          white-space: normal;
          top: 45px;
          padding: 1rem;
          display: flex;
          z-index: 1000;
          flex-wrap: wrap;

          .nav-card-item {
            padding: 2px 5px;
            margin: 0.5rem;
            color: var(--taojin-font-3);
            background-color: rgba(212, 210, 210, 0.3);
            border: 1px solid var(--taojin-font-4);
            border-radius: 30px;
          }

          .nav-card-item:hover {
            color: var(--taojin-brand-2-hover);
          }

          .childChecked {
            color: #fff !important;
            background-color: #007fff;
          }
        }

        span {
          height: 40px;
          line-height: 40px;
          padding: 0 1rem;
        }
      }

      .nav-item:hover {
        color: var(--hover-color);
      }
    }
  }
}

.checked {
  color: var(--hover-color) !important;
}

.visable {
  transform: translate3d(0, -5rem, 0);
}

.cate-manage {
  height: 40px;
  line-height: 40px;
  position: absolute;
  right: 0;
  padding: 0 1rem;
  font-size: 1.16rem;
  cursor: pointer;
  color: #71777c;
}

.cate-manage:hover {
  color: var(--hover-color);
}
</style>
